<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>流水明细</title>

    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script th:src="@{/js/moment-with-locales.js}"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css"
          rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css"
          rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>


</head>
<body>

<!--引入公共部分-->
<div th:replace="common.html::head(activeUri='use4')"></div>
<form th:action="@{/detail}" class="form-inline ml-2" id="search-form" style="margin: 10px" method="post">
    <div class="form-group input-group-sm mr-3">
        <label class="mr-1">卡号</label>
        <input type="text" name="cardNum" class="form-control input-group-sm" placeholder="Jane Doe"
               style="margin-right: 10px"
               th:value="${search.cardNum}">
    </div>


    <div class="form-group input-group-sm mr-3">
        <label class="mr-1">交易类型</label>

        <select class="form-control input-sm width-90" name="businessType">
            <option value="" selected>--请选择--</option>
            <option th:each="type:${types}" th:value="${type}"
                    th:selected="${search.businessType eq type}">
                [[${type}]]
            </option>
        </select>
    </div>
    <div class="form-group input-group-sm mr-3">
        <label class="mr-1">收入支出</label>

        <select class="form-control input-sm width-90" name="status">
            <option value="" selected>--请选择--</option>
            <option value="1" th:selected="${search.status eq true}">支出</option>
            <option value="0" th:selected="${search.status eq false}">收入</option>
        </select>
    </div>

    <div class='form-group input-group-sm mr-3'>
        <label>选择开始时间：</label>
        <!--指定 date标记-->
        <div class='input-group date'>
            <input type="text" id="datetimepicker1" value=" " placeholder="查询年月" name="businessTimeStart"
                   th:value="${search.businessTimeStart}" class="form-control">
        </div>
    </div>
    <div class='form-group input-group-sm mr-3'>
        <label>选择结束时间：</label>
        <!--指定 date标记-->
        <div class='input-group date'>
            <input type="text" id="datetimepicker2" value=" " placeholder="查询年月" name="businessTimeEnd"
                   th:value="${search.businessTimeEnd}" class="form-control">
        </div>
    </div>


    <div class="form-group input-group-sm mr-3">
        <button type="submit" class="btn btn-sm btn-primary mr-3">查询</button>
    </div>

</form>

<div class="container-fluid" style="margin-top: 10px">
    <div class="row-fluid">
        <div class="span12">
            <table class="table">
                <thead>
                <tr>
                    <th>银行卡号</th>
                    <th>流水金额</th>
                    <th>存取标志</th>
                    <th>交易时间</th>
                    <th>交易后余额</th>
                    <th>交易类型</th>
<!--                    <th>对方卡号</th>-->
                    <th>交易结果</th>
                </tr>
                </thead>
                <tbody>
                <tr class="success" th:each="flowLog:${flowLogs}">
                    <td th:text="${flowLog.cardNum}">张三</td>
                    <td th:text="${flowLog.price}">张三</td>
                    <td th:text="${flowLog.status eq true ? '支出':'收入'}">张三</td>
<!--                    <td th:text="${#dates.format(flowLog.businessTime, 'yyyy-MM-dd')}">张三</td>-->
                    <td th:text="${#dates.format(flowLog.businessTime, 'yyyy-MM-dd HH:mm:ss')}">张三</td>
                    <td th:text="${flowLog.balance}">张三</td>
                    <td th:text="${flowLog.businessType}">张三</td>
<!--                    <td th:text="${flowLog.getBusinessUserCardNo()}">张三</td>-->
                    <td th:text="${flowLog.result eq true ? '成功':'失败'}">张三</td>

                </tr>

                </tbody>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $("#datetimepicker1").datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss',//显示格式
            // startView:2,
            // minView:2,
            // maxView :2,
            // language: 'zh-CN',
            // autoclose: 1,//选择后自动关闭
            // clearBtn:true,//清除按钮
        });

        $("#datetimepicker2").datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss',//显示格式
            // startView:2,
            // minView:2,
            // maxView :2,
            // language: 'zh-CN',
            // autoclose: 1,//选择后自动关闭
        });
        // $("#datetimepicker1").val(); //获取值
        // $("#datetimepicker1").val("2018-03-03"); //赋值
        // $("#datetimepicker1").val("");  //赋为空

    });
</script>
</body>
</html>